<template>
  <div>
    <el-row style="width: 98%; padding: 15px 0 15px 0; margin: 0 auto">
      <el-col :span="6">
        <div style="float: left">
          <el-button type="primary" @click="changeToWaitAuditTable" round>
            待审批列表
          </el-button>
        </div>
        <div style="float: left; margin-left: 20px">
          <el-button type="info" @click="changeToAllApplyTable">
            所有申请列表
          </el-button>
        </div>
      </el-col>
    </el-row>

    <!-- 这里是待审批申请信息表格 -->
    <el-row v-if="!allApplyListTable">
      <el-table
        ref="applyInfoList"
        :data="
          applyInfoList == null
            ? []
            : applyInfoList.slice(
                (pageData.currentPage - 1) * pageData.pageSize,
                pageData.currentPage * pageData.pageSize
              )
        "
        border
        @row-click="handleExpandRow"
        :header-cell-style="getHeadClass"
        :row-class-name="allApplyClassName"
        empty-text="当前没有数据，请添加数据"
        style="width: 98%; margin: 0 auto"
      >
        <el-table-column
          label="资源id"
          prop="applyResourceId"
          align="center"
          :formatter="showNull"
          width="90"
          sortable
        ></el-table-column>
        <el-table-column
          label="资源类别"
          prop="resourceTypeName"
          align="center"
          width="120"
          sortable
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="申请人"
          prop="applyBy"
          align="center"
          width="100"
          :formatter="formatterUserNameToTitle"
          sortable
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="申请原因"
          prop="applyReason"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="管理员备注"
          prop="adminRemark"
          align="center"
          width="180"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="流程信息"
          prop="processInfo"
          align="center"
          width="180"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-image
              :src="processImageURL + scope.row.processInstanceId"
              :preview-src-list="[
                processImageURL + scope.row.processInstanceId,
              ]"
              style="width: 180; height: 30px"
              title="点击查看当前流程"
            >
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          label="申请状态"
          prop="applyStatus"
          align="center"
          width="120"
          sortable
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="开始使用时间"
          prop="applyStartUseTime"
          align="center"
          width="180"
          sortable
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="结束使用时间"
          prop="applyEndUseTime"
          align="center"
          width="180"
          sortable
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          width="120"
          label="操作"
        >
          <template slot-scope="scope">
            <div :hidden="!(scope.row.applyStatus === applyStatus.auditing)">
              <el-button
                type="text"
                @click="handleAgreeApply(scope.$index, scope.row)"
              >
                同意
              </el-button>
              <el-button
                type="text"
                @click="handleBackApply(scope.$index, scope.row)"
              >
                驳回
              </el-button>
            </div>
            <el-button
              :hidden="!(scope.row.applyStatus === applyStatus.assigning)"
              type="text"
              @click="handleBackApplyInAssign(scope.$index, scope.row)"
            >
              驳回
            </el-button>
            <el-button
              :hidden="!(scope.row.applyStatus === applyStatus.assigning)"
              type="text"
              @click="handleAssignDialog(scope.$index, scope.row)"
            >
              分配
            </el-button>
            <el-button
              :hidden="!(scope.row.applyStatus === applyStatus.returning)"
              type="text"
              @click="handleReleaseResource(scope.$index, scope.row)"
            >
              释放
            </el-button>
          </template>
        </el-table-column>
        <!-- 子表格 -->
        <el-table-column type="expand" align="center">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <h2>申请资源信息：</h2>
              <el-form-item
                v-for="field in props.row.entityFieldInfo"
                :key="field.resourceTypeFieldName"
                :label="field.resourceTypeFieldTitle"
              >
                <span
                  v-if="
                    field.resourceTypeFieldUnit == '' ||
                    field.resourceTypeFieldUnit == null
                  "
                >
                  {{ props.row.items[field.resourceTypeFieldName] }}
                </span>
                <span v-else>
                  {{ props.row.items[field.resourceTypeFieldName] }}({{
                    field.resourceTypeFieldUnit
                  }})
                </span>
                ;
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        hide-on-single-page
        background
        :current-page="pageData.currentPage"
        :layout="layout"
        :page-sizes="[5, 10, 20, 50, 100]"
        :page-size="pageData.pageSize"
        :total="pageData.total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      ></el-pagination>
    </el-row>

    <!-- 这里是所有申请信息表格 -->
    <el-row v-if="allApplyListTable">
      <el-table
        ref="applyInfoList"
        :data="
          applyInfoList == null
            ? []
            : applyInfoList.slice(
                (pageData.currentPage - 1) * pageData.pageSize,
                pageData.currentPage * pageData.pageSize
              )
        "
        border
        @row-click="handleExpandRow"
        :header-cell-style="getHeadClass"
        :row-class-name="allApplyClassName"
        empty-text="当前没有数据，请添加数据"
        style="width: 98%; margin: 0 auto"
      >
        <el-table-column
          label="资源id"
          prop="applyResourceId"
          align="center"
          :formatter="showNull"
          width="90"
          sortable
        ></el-table-column>
        <el-table-column
          label="资源类别"
          prop="resourceTypeName"
          align="center"
          width="120"
          sortable
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="申请人"
          prop="applyBy"
          align="center"
          width="100"
          :formatter="formatterUserNameToTitle"
          sortable
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="申请原因"
          prop="applyReason"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="管理员备注"
          prop="adminRemark"
          align="center"
          width="180"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="流程信息"
          prop="processInfo"
          align="center"
          width="180"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-image
              :src="processImageURL + scope.row.processInstanceId"
              :preview-src-list="[
                processImageURL + scope.row.processInstanceId,
              ]"
              style="width: 180; height: 30px"
              title="点击查看当前流程"
            >
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          label="申请状态"
          prop="applyStatus"
          align="center"
          width="120"
          sortable
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="开始使用时间"
          prop="applyStartUseTime"
          align="center"
          width="180"
          sortable
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="结束使用时间"
          prop="applyEndUseTime"
          align="center"
          width="180"
          sortable
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          width="120"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              :hidden="!(scope.row.applyStatus === applyStatus.using)"
              type="text"
              @click="handleEditInfoDialog(scope.$index, scope.row)"
            >
              修改
            </el-button>
            <el-button
              :hidden="!(scope.row.applyStatus === applyStatus.using)"
              type="text"
              @click="
                handleAdvanceReleaseResourceDialog(scope.$index, scope.row)
              "
            >
              <template
                v-if="
                  Date.parse(new Date()) > Date.parse(scope.row.applyEndUseTime)
                "
              >
                释放
              </template>
              <template v-else>提前释放</template>
            </el-button>
          </template>
        </el-table-column>
        <!-- 子表格 -->
        <el-table-column type="expand" align="center">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <h2>申请资源信息：</h2>
              <el-form-item
                v-for="field in props.row.entityFieldInfo"
                :key="field.resourceTypeFieldName"
                :label="field.resourceTypeFieldTitle"
              >
                <span
                  v-if="
                    field.resourceTypeFieldUnit == '' ||
                    field.resourceTypeFieldUnit == null
                  "
                >
                  {{ props.row.items[field.resourceTypeFieldName] }}
                </span>
                <span v-else>
                  {{ props.row.items[field.resourceTypeFieldName] }}({{
                    field.resourceTypeFieldUnit
                  }})
                </span>
                ;
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        hide-on-single-page
        background
        :current-page="pageData.currentPage"
        :layout="layout"
        :page-sizes="[5, 10, 20, 50, 100]"
        :page-size="pageData.pageSize"
        :total="pageData.total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      ></el-pagination>
    </el-row>

    <!-- 修改申请信息弹窗 -->
    <ApplyInfoFormComponent
      @closed-dialog="closedDialog"
      page="audit"
      :rowData="applyInfo"
      :addOrUpdate="addOrUpdate"
      v-if="addApplyDialogVisible"
    ></ApplyInfoFormComponent>

    <!-- 填写驳回备注弹窗 -->
    <el-dialog
      title="填写备注"
      :visible.sync="setAdminRemarkDialogVisible"
      @closed="closedDialog"
      style="width: 60%; margin: 0 auto"
    >
      <div>
        <el-form
          style="width: 80%; margin: 0 auto"
          :model="applyInfo"
          label-width="120px"
        >
          <el-form-item label="备注">
            <el-input
              v-model="applyInfo.adminRemark"
              placeholder="请填写备注"
              @input="change($event)"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="setAdminRemarkDialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="handleRebackApply">提交</el-button>
      </div>
    </el-dialog>

    <!-- 填写分配资源阶段驳回备注弹窗 -->
    <el-dialog
      title="填写备注"
      :visible.sync="setRebackRemarkDialogVisible"
      @closed="closedDialog"
      style="width: 60%; margin: 0 auto"
    >
      <div>
        <el-form
          style="width: 80%; margin: 0 auto"
          :model="applyInfo"
          label-width="120px"
        >
          <el-form-item label="备注">
            <el-input
              v-model="applyInfo.adminRemark"
              placeholder="请填写备注"
              @input="change($event)"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="setRebackRemarkDialogVisible = false">
          关闭
        </el-button>
        <el-button type="primary" @click="handleRebackApplyInAssign">
          提交
        </el-button>
      </div>
    </el-dialog>

    <!-- 填写提前释放备注弹窗 -->
    <el-dialog
      title="填写备注"
      :visible.sync="setAdvanceReleaseDialogVisible"
      @closed="closedDialog"
      style="width: 60%; margin: 0 auto"
    >
      <div>
        <el-form
          style="width: 80%; margin: 0 auto"
          :model="applyInfo"
          label-width="120px"
        >
          <el-form-item label="备注">
            <el-input
              v-model="applyInfo.adminRemark"
              placeholder="请填写备注"
              @input="change($event)"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="setAdvanceReleaseDialogVisible = false">
          关闭
        </el-button>
        <el-button type="primary" @click="handleAdvanceReleaseResource">
          提交
        </el-button>
      </div>
    </el-dialog>

    <!-- 修改申请信息弹窗 -->
    <el-dialog
      title="修改申请信息"
      :visible.sync="editApplyInfoDialogVisible"
      @closed="changeToAllApplyTable"
      style="width: 80%; margin: 0 auto"
    >
      <div>
        <el-form
          ref="applyInfo"
          :rules="applyInfoRules"
          :model="applyInfo"
          label-width="180px"
        >
          <el-form-item label="资源类别" prop="resourceTypeName">
            <el-select
              disabled
              v-model="applyInfo.resourceTypeName"
              placeholder="请选择资源类别"
            >
              <el-option
                v-for="resourceType in resourceTypeList"
                :key="resourceType.resourceTypeName"
                :label="resourceType.resourceTypeTitle"
                :value="resourceType.resourceTypeName"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="false" label="申请数量" prop="applyCount">
            <el-input
              v-model="applyInfo.applyCount"
              placeholder="请填写申请数量"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="申请原因" prop="applyReason">
            <el-input
              v-model="applyInfo.applyReason"
              placeholder="请填写申请原因"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="申请时间" prop="applyTime">
            <el-date-picker
              v-model="applyInfo.applyTime"
              type="daterange"
              :picker-options="pickerBeginDateBefore"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
            <el-button type="text" @click="usingLongTime">
              点我长期使用
            </el-button>
          </el-form-item>
          <el-form-item label="管理员备注" prop="adminRemark">
            <el-input
              v-model="applyInfo.adminRemark"
              placeholder="请填写备注"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editApplyInfoDialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="handleEditApplyInfoResource">
          提交
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script src="./auditApply.js"></script>

<style>
  html body .el-table .error-row {
    background: rgb(216, 205, 214);
  }

  html body .el-table .warning-row {
    background: #ffffe0;
  }

  html body .el-table .success-row {
    background: #f5deb3;
  }
</style>
